axios请求和响应拦截

/**
 * axios
 */
import axios from 'axios';

// 引入qs 处理前后端分离项目 post请求返回数据多了一层data对象
import qs from 'qs';

// 自己的项目 引入的store仓库 根据自己按需引入
import store from '@/store';

// 自己项目中的工具类文件  根据自己按需引入
import {util} from '@/utils';

/**
*   这里说明一下 运行环境 一般正常项目环境会有
*   1、开发 development
*   2、测试 test
*   3、 生产环境 production
*   vue-cli3 可以自行配置对应的环境配置文件 对应可看
*    https://cli.vuejs.org/zh/guide/mode-and-env.html
*/

// 运行环境
const env = process.env.NODE_ENV === 'production' && process.env.VUE_APP_MODE === 'production' ?
    'production' :
    process.env.VUE_APP_MODE === 'test' ? 'test' :
    'development';

// 线上测试环境 && 线上正式环境
const baseURL = env === 'production' ? 'http://production.xxx.com' : env==='test'?'http:test.xxx.com':'http:development.xxx.com';

// 本地开发环境（本地mock数据 需要配置node作为服务）
// const baseURL = 'http://localhost:3001/mock'

// 创建实例
const instance = axios.create({
    baseURL,
    timeout: 30000
});

// 发送请求允许携带 cookie
instance.defaults.withCredentials = true;
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 请求拦截
instance.interceptors.request.use(config => {
    // 格式化Post数据
    if (config.method == 'post') {
        config.data = qs.stringify(config.data);
    }
    return config
}, error => {
    util.error('服务器错误！！！');
    return Promise.reject(error);
})

// 响应拦截
instance.interceptors.response.use(response => {

    // 响应的数据中 后台把数据放到data对象中 所以用解构赋值  这里也得和后台做统一返回数据格式
    let {data} = response;
    
    // 响应的状态码 和后台做好开发前的 对接
    if (response.status == 500) {
        util.error('服务器开小差了，请稍后再试');
    } else if (data.code == 1001 || data.code == 1002) { // 其他状态码
        // 其他状态码的处理 逻辑
        ***
        ***
        ***
    } else if (data.code != 0) { // 非0则提示错误信息
        util.error(data.message);
    }
    return data;
}, error => {
    // 请求超时处理
    if (error.toString().search('timeout')) {
        util.error('请求超时！');
    }
    return Promise.reject(error);
});

export default instance;

// 然后在需要用到请求的地方引入该文件就可以了

vue-cli3 环境变量和模式